/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useState, useEffect } from "react";
import { Button, Col, Spin, Tooltip, Input, Row, Select, message } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { formatterCurrency, formatterCurrencyStr, formatterCurrencyStr2, formatterSize, formatterSizeFromMB } from "@utils/format";
import _ from "lodash";
import moment from "moment";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { Pie, Line } from "@ant-design/plots";
import api from "../../../services";
import apiHelper from "../../../services/api-helper";
import DCard from "@/components/DCard";
import sse from "@/services/sse";


let timeout = null;
let ignore = false;
let lastBlockHeight = 0;


const SearchBar = ({ className }) => {
	const [loading, setLoading] = useState(false);
	const [total, setTotal] = useState({
		events: { num: '--', full: 0, fullStr: '' },
		staking: { num: '--', full: 0, fullStr: '' },
		validator: { num: '--', full: 0, fullStr: '' },
		nominator: { num: '--', full: 0, fullStr: '' },
		extrinsics: { num: '--', full: 0, fullStr: '' },
		transfer: { num: '--', full: 0, fullStr: '' },
		issuance: { num: '--', full: 0, fullStr: '' },
		moneyedAccount: { num: '--', full: 0, fullStr: '' }
	});
	const [blockHeight, setBlockHeight] = useState(0);
	const [red, setRed] = useState(false);
	async function init() {
		setLoading(true);
		await apiHelper.showTotal2(api.total.events, setTotal, 'events');
		await apiHelper.showTotal2(api.total.staking, setTotal, 'staking', true);
		await apiHelper.showTotal2(api.total.validator, setTotal, 'validator');
		await apiHelper.showTotal2(api.total.nominator, setTotal, 'nominator');
		await apiHelper.showTotal2(api.total.extrinsics, setTotal, 'extrinsics');
		await apiHelper.showTotal2(api.total.transfer, setTotal, 'transfer');
		await apiHelper.showTotal2(api.total.issuance, setTotal, 'issuance', true);
		await apiHelper.showTotal2(api.total.moneyedAccount, setTotal, 'moneyedAccount');
		setLoading(false);
	}
	useEffect(() => {
		const setBH = (d) => {
			if (ignore || d <= lastBlockHeight) {
				return;
			}
			lastBlockHeight = d;
			setBlockHeight(d);
			setRed(true);
			clearTimeout(timeout);
			timeout = setTimeout(function () {
				if (ignore) return;
				setRed(false);
			}, 2000);
		}
		ignore = false;
		setBlockHeight(lastBlockHeight);
		let unsub = sse(setBH);
		window.subBlockHeight = setBH;
		init();
		return () => {
			ignore = true;
			window.subBlockHeight = null;
			clearTimeout(timeout);
			unsub();
		};
	}, []);


	return (
		<div className={className}>
			<DCard>
				<Spin spinning={loading}>
					<div className="box-con">
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/block.png"} />
							<div>
								<span className="tt1" data-api-url="/block/query/latest">Lastest Block</span>
								<label className={red ? '#0057FF' : 'black'}>{parseInt(blockHeight).toLocaleString("zh", { style: "decimal" })}</label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/event.png"} />
							<div>
								<span className="tt1" data-api-url="/block/query/events/count">Events</span>
								<label><Tooltip title={total.events.fullStr}>{total.events.num}</Tooltip></label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/staking.png"} />
							<div>
								<span className="tt1" data-api-url="/chain/query/staking/total">Staking</span>
								<label className="banlance"><Tooltip title={total.staking.fullStr}>{total.staking.num}</Tooltip></label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/validator.png"} />
							<div>
								<span className="tt1" data-api-url="/chain/query/validator/count">Validators</span>
								<label>
									<b>{total.validator.num}</b> / {parseInt(total.nominator.num) + parseInt(total.validator.num)}
								</label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/extrinsic.png"} />
							<div>
								<span className="tt1" data-api-url="/block/query/extrinsics/count">Extrinsics</span>
								<label><Tooltip title={total.extrinsics.fullStr}>{total.extrinsics.num}</Tooltip></label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/transfer.png"} />
							<div>
								<span className="tt1" data-api-url="/transfer/query/count">Transfers</span>
								<label><Tooltip title={total.transfer.fullStr}>{total.transfer.num}</Tooltip></label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/issuance.png"} />
							<div>
								<span className="tt1" data-api-url="/chain/query/issuance">Total Issuance (CESS)</span>
								<label className="banlance"><Tooltip title={total.issuance.fullStr}>{total.issuance.num}</Tooltip></label>
							</div>
						</div>
						<div className="box">
							<img src={process.env.PUBLIC_URL + "/img/holder.png"} />
							<div>
								<span className="tt1" data-api-url="/account/query/moneyed/count">Holders</span>
								<label><Tooltip title={total.moneyedAccount.fullStr}>{total.moneyedAccount.num}</Tooltip></label>
							</div>
						</div>
					</div>
				</Spin>
			</DCard>
		</div>
	);
};

export default React.memo(styled(SearchBar)`
	display: block;
	margin-bottom: 10px;
	.red{
		color:red!important;
	}
	.box-con {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.box {
			width: 25%;
			height: 80px;
			display: flex;
			flex-direction: row;
			align-items: center;
			img {
				width: 34px;
				margin: 0 20px;
			}
			div {
				display: flex;
				flex-direction: column;
				.tt1 {
					font-size: 14px;
					color: #6b7486;
					line-height: 20px;
				}
				label {
					font-size: 20px;
					color: #282e39;
					line-height: 18px;
				}
			}
		}
	}
	@media screen and (min-width: 500px) and (max-width: 1200px) {
		.box {
			width: 50% !important;
		}
	}
	@media screen and (max-width: 500px) {
		.box-con {
			padding:0 20px;
			justify-content: space-between;
			.box {
				width: 50% !important;
				&:nth-child(even){
					width: auto !important;
					min-width: 120px;
				}
				img {
					display: none;
				}
			}
		}
	}
`);
